<template>
  <div class="exam-container">
    <el-skeleton :loading="isFirst" :rows="15" animated>
      <div class="head-content-search">
        <div style="display: flex">
          <div class="exam-top-addbtn">
            <el-button plain size="small" type="primary" @click="addQuestion">新增题库</el-button>
          </div>

          <!-- 搜索框 -->
          <div class="mySearch" style="flex: 1">
            <el-input
              :width="150"
              v-model="key"
              placeholder="请输入你要查询的题库名称"
              class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>

          <div class="myTips">
            <el-tag class="mx-1" size="small"
              >tips:如果要新增试题,请在【默认题库/新增/导入】！</el-tag
            >
          </div>
        </div>
      </div>

      <div style="margin-top: 10px">
        <el-table :data="data" v-loading="isLoad" :border="true">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="题库"
            prop="QBName"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
            <template #default="scope">
              <el-tag type="success" size="small" v-if="scope.row.id != -1">{{
                scope.row.name
              }}</el-tag>
              <el-tag type="primary" size="small" v-if="scope.row.id == -1">{{
                scope.row.name
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="题目数" prop="count" width="100">
            <template #default="scope">
              <el-tag type="primary" size="small" v-if="scope.row.id == -1">
                <count-to
                  :startVal="0"
                  :endVal="scope.row.count"
                  :autoPlay="true"
                  :duration="2000"
                  v-if="scope.row.id == -1"
                ></count-to
              ></el-tag>
              <el-tag type="primary" size="small" v-if="scope.row.id != -1">{{
                scope.row.count
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="难度" prop="lv" width="100">
            <template #default="scope">
              <el-tag type="primary" size="small">{{ scope.row.lv }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="标签" prop="labels" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-tag type="primary" size="small">{{ scope.row.labels==""?"-":scope.row.labels }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布" prop="isPublish" width="100">
            <template #default="scope">
              <!-- 1.已经发布 0.没有发布 -->
              <el-tag type="success" size="small" v-if="scope.row.isPublish == 1  || scope.row.isPublish == null">是</el-tag>
              <el-tag type="danger" size="small" v-if="scope.row.isPublish == 0">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="禁用" prop="isBan" width="100">
            <template #default="scope">
              <!-- 1.禁用 0.没禁用 -->
              <el-tag type="danger" size="small" v-if="scope.row.isBan == 1">是</el-tag>
              <!-- <el-tag type="success" size="small" v-else="scope.row.isBan == 0">否</el-tag> -->
              <el-tag type="success" size="small" v-else>否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="350">
            <template #default="scope">
              <el-button
                v-if="scope.row.id != -1 "
                type="warning"
                size="small"
                @click="question(scope.row.id)"
                plain
                :loading="btnLoad"
                >试题</el-button
              >

              <!-- 默认试题按钮 -->
              <el-button
                v-if="scope.row.id == -1 "
                type="warning"
                size="small"
                @click="question(scope.row.id)"
                plain
                :loading="btnLoad"
                >试题</el-button
              >



                   <!-- 发布 -->
                   <el-popconfirm
                title="确认要发布吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="IsPublish(scope.row, 1)"
              >
                <template #reference>
                  <el-button
                    type="warning"
                    size="small"
                    v-if="scope.row.id != -1 && scope.row.isPublish == 0 && scope.row.isPublish!=null &&  scope.row.isBan != null " 
                    :loading="btnLoad"
                    >发布</el-button
                  >
                </template>
              </el-popconfirm>
              

              <el-button
                type="primary"
                size="small"
                plain
                :loading="btnLoad"
                @click="questionDetail(scope.row)"
                v-if="scope.row.id != -1"
                >详情</el-button
              >
              <!-- 启用 -->
              <el-button
                type="success"
                size="small"
                @click="editIsBan(scope.row, 0)"
                v-if="scope.row.id != -1 && scope.row.isBan == 1 && scope.row.isPublish == 1"
                :loading="btnLoad"
                >启用</el-button
              >
              <!-- 禁用 -->
              <el-popconfirm
                title="确认禁用吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="editIsBan(scope.row, 1)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    v-if="
                      scope.row.id != -1 && scope.row.isBan == 0 && scope.row.isPublish == 1 && scope.row.count>0
                    "
                    :loading="btnLoad"
                    >禁用</el-button
                  >
                </template>
              </el-popconfirm>

         

              <!-- 删除 -->
              <el-popconfirm
                title="确认要删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="delQuestionBank(scope.row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    plain
                    v-if="
                      scope.row.id != -1 && scope.row.isPublish == 0 && scope.row.count == 0
                    "
                    :loading="btnLoad"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>

              <!-- 取消发布 -->
              <el-popconfirm
                title="确认要取消发布吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="IsPublish(scope.row, 0)"
              >
                <template #reference>
                  <el-button
                    type="info"
                    size="small"
                    plain
                    v-if="scope.row.id != -1 && scope.row.isPublish == 1 && 
                      scope.row.count == 0 && scope.row.isPublish!=null &&  scope.row.isBan != null
                    "
                    :loading="btnLoad"
                    >取消</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="margin-top: 10px; padding-bottom: 10px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            small
            :page-size="limit"
            v-model:current-page="page"
          />
        </div>
      </div>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import {
  getQuestionBanks,
  getQuestionBankCount,
  delQuestionBank,
  editIsBan,
  editPublish
} from '../../api/exam'
import { defineComponent, onMounted, reactive, toRefs, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import type getQuestionBanksPage from '@/dto/QuestionDto'
import type Loading from '@/dto/LoadDto'
import { Search } from '@element-plus/icons-vue'
import { openLoad, closeLoad } from '@/utils/loading'
//数字加载滚动效果
import { CountTo } from 'vue3-count-to'
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup() {
    const router = useRouter();

    /**
     * 模糊查询/分页/表格数据
     */
    const data = reactive<getQuestionBanksPage>({
      page: 1,
      limit: 10,
      key: '',
      data: [],
      total: 2,
      QBCount: 0
    })

    /**
     * 加载效果
     */
    const Loading = reactive<Loading>({
      //表格加载效果
      isLoad: true,
      //屏骨架加载效果
      isFirst: true,
      //点击按钮加载效果
      btnLoad: false
    })

    /**
     * events start事件
     */
    const events = {
      /**
       * 题库详情按钮触发
       */
      questionDetail:(val:any)=>{
        openLoad('请稍后')
        setTimeout(() => {
          closeLoad();
          router.push(`/exam/questionDetail/${val.id}`)
        }, 2000)
      },
      /**
       * 点击试题跳转
       * @param id 
       */
      question: (id: string) => {
        // if(id=="-1" || id=="")
        router.push(`/exam/question/index/${id}`)
      },
      /**
       * 添加题库
       */
      addQuestion: () => {
        openLoad('请稍后')
        setTimeout(() => {
          closeLoad();
          router.push('/exam/addQuestion')
        }, 2000)
      },

      /**
       * 发布题库/取消发布
       */
      IsPublish: (val: any, num: number) => {
        editPublish({ ids:[val.id], isPublish: num }).then((res: any) => {
          if (res.result === 0) {
            ElMessage.success(res.message)
            events.getQuestionBanks()
          } else {
            ElMessage.success(res.message)
          }
        })
      },

      /**
       * 获取所有题库/模糊查询题库
       */
      getQuestionBanks: () => {
        Loading.isLoad = true
        getQuestionBanks({
          page: data.page,
          limit: data.limit,
          key: data.key
        }).then((res: any) => {
          if (res.result == 0) {
            data.data = res.data.data;
            data.total = res.data.total;
            //如果模糊查询时也想显示默认题库,请删除该判断
            if (data.key == '') {
              data.data?.unshift({
                id: -1,
                name: '默认题库',
                count: data.QBCount,
                lv: '-',
                labels: '-',
                isPublish: 1,
                isBan: 0
              })
            }
            setTimeout(() => {
              Loading.isFirst = false
              Loading.isLoad = false
            }, 2000)
          }
        })
      },

      /**
       * 获取默认题库数量
       */
      getQBCount: () => {
        getQuestionBankCount({}).then((res: any) => {
          if (res.result == 0) {
            data.QBCount = res.data;
          }
        })
      },

      /**
       * 启用与禁用
       * @param val
       * @param num 0为启用状态 触发后改为1/启用状态  1为禁用状态 触发后改为0/禁用状态
       */
      editIsBan: (val: any, num: number) => {
        // Loading.btnLoad=true;
        editIsBan({ ids:[val.id], isBan: num }).then((res: any) => {
          Loading.btnLoad = false
          if (res.result === 0) {
            ElMessage.success(res.message)
            events.getQuestionBanks();
          } else {
            ElMessage.success(res.message)
          }
        })
      },

      /**
       * 删除当前行的题库 根据题库ID
       * @param val
       */
      delQuestionBank: (val: any) => {
        // Loading.btnLoad=true;
        delQuestionBank({ ids:[ val.id] }).then((res: any) => {
          Loading.btnLoad = false
          events.getQuestionBanks()
          if (res.result === 0) {
            ElMessage.success('操作成功')
          } else {
            ElMessage.success('参数错误')
          }
        })
      }
    }
    /**
     * events end事件
     */

    //监听事件 用于监听双向绑定的数据,包括调用方法传入的参数
    watchEffect(() => {
      events.getQuestionBanks();
    })

    onMounted(() => {
      events.getQBCount();
      events.getQuestionBanks();
    })

    return {
      ...toRefs(data),
      ...toRefs(Loading),
      ...events,
      CountTo,
      Search
    }
  }
})
</script>

<style  scoped>


.exam-top-addbtn {
  flex: 1;
  margin-top: 6px;
}

.myTips {
  flex: 1;
  /* padding-left: 300px; */
  margin-top:5px;
  display: flex;
  justify-content: flex-end;
}

.last_commoner {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  /* //改变数字显示几行 */
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
}
</style>